<template>
  <view class="shop_list_wrap">
    <view class="list">
      <view class="item" v-for="(item) in shopList" :key="item.id" @tap="gotoGoodList(item)">
        <img :src="item.shop_url" class="item_img" />
        <view class="item_info">
          <view class="shop_name">{{item.shop_name}}</view>
          <view class="shop_desc">{{item.introduce}}</view>
        </view>
        <view class="item_btn">去购物 &gt;</view>
      </view>
      <view v-if="!shopList.length">
        <u-empty description="该组织下暂无店铺～" />
      </view>
    </view>
  </view>
</template>

<script>
import get from 'lodash/get';
import uEmpty from '@/basic-components/u-empty/index.vue';
import { SHOP_LIST } from '@/api';

export default {
  components: {
    uEmpty,
  },

  data() {
    return {
      shopList: [],    
      shop_type:1,    
    };
  },
  async onLoad(option) {
    this.shop_type=getApp().globalData.shop_type;
    console.log('option=',this.shop_type)
    this.getShopList(this.shop_type);
  },
  methods: {
    async getShopList(shop_type) {
      const res = await this.$http.get(SHOP_LIST, {regionId: uni.getStorageSync('regionId'),shop_type: shop_type});
      this.shopList = get(res, 'data', []);
      console.log('this.shopList-----',this.shopList);
    },
    gotoGoodList(item) {
      this.$navigate({
        page: 'good',
        params: {
          id: item.id,
          name: item.shop_name,
          shopType:this.shop_type,
        },
      });
    },
  },
};
</script>

<style lang="less">
.shop_list_wrap {
  padding-top: 20rpx;
  .list {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    .item {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      width: 690rpx;
      padding: 30rpx;
      margin: auto;
      margin-bottom: 20rpx;
      background-color: #ffffff;
      border-radius: 16rpx;
      
      .item_img {
        width: 120rpx;
        height: 120rpx;
      }
      .item_info {
        flex: 1;
        margin: 0 20rpx;
        .shop_name {
          font-size: 36rpx;
          font-weight: 900;
          margin-bottom: 10rpx;
        }
        .shop_desc {
          color: #999;
          font-size: 24rpx;
        }
      }
      .item_btn {
        width: 160rpx;
        font-size: 36rpx;
        color: #fedd00;
      }

      .merber {
        display: flex;
        align-items: center;
        &__img {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          margin-right: 16rpx;
        }
        &__desc {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          flex: 1;
          .name {
            font-size: 28rpx;
          }
          .desc {
            display: flex;
            align-items: center;
            font-size: 22rpx;
            color: #999999;
          }
          .split {
            margin: 0 16rpx;
          }
        }
      }
      .title {
        font-size: 32rpx;
        font-weight: 500;
        padding: 20rpx 0;
      }
      .imgs {
        display: flex;
        align-items: center;
        justify-content: space-between;
        &__li {
          width: 210rpx;
          height: 210rpx;
          border-radius: 8rpx;
          background-color: #000;
        }
      }
      .count-line {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 18rpx;
        .price {
          font-size: 28rpx;
          font-weight: 500;
          color: #ff0000;
        }
      }
    }
  }
}
</style>
